<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>方块移动</title>
	<style>
		body {
			margin: 0;
		}

		#box {
			width: 50px;
			height: 50px;
			background-color: coral;
			position: absolute;
			top: 200px;
			left: 100px;
		}
	</style>
</head>

<body>
	<div id="box"></div>
	<script>
		var box = document.getElementById('box')
		var t
		//开关,false表示没有被点击过,应开始移动.
		var flag = false
		box.addEventListener('click', function () {
			if (!flag) {
				t = setInterval(function () {
					//1. 获取当前方块的left
					var style = window.getComputedStyle(box)
					var left = parseFloat(style.left)
					//2. 增加left样式属性值
					left++
					//3. 利用内联样式覆盖外联样式
					box.style.left = left + 'px'
				}, 10)
				flag = true
			} else {
				clearInterval(t)
				flag = false
			}
		})


	</script>
</body>

</html>